let chartsData = {
  "fltj":[
      { "name":"公共文化", "xms":160, "zds":10, "zjl":645 },
      { "name":"公共教育", "xms":848, "zds":580, "zjl":10 },
      { "name":"医疗卫生", "xms":370, "zds":10, "zjl":150560 },
      { "name":"公共体育", "xms":91, "zds":0, "zjl":182 },
      { "name":"社会保障", "xms":233, "zds":10, "zjl":808 },
      { "name":"基层公共服务", "xms":20, "zds":10, "zjl":10 }
  ],
  "zjly":[
      { "name":"省级", "value":88 },
      { "name":"市级", "value":127 },
      { "name":"区县级", "value":175 },
      { "name":"街道级", "value":270 },
      { "name":"社会资本", "value":42 }
  ],
  "ndtj":{
      "xms":[
          { "name":"2013", "value":1 },
          { "name":"2014", "value":2 },
          { "name":"2015", "value":6 },
          { "name":"2016", "value":36 },
          { "name":"2017", "value":85 },
          { "name":"2018", "value":10 },
          { "name":"2018年", "value":17 }
      ],
      "zds":[
          { "name":"2013", "value":10 },
          { "name":"2014", "value":20 },
          { "name":"2015", "value":30 },
          { "name":"2016", "value":40 },
          { "name":"2017", "value":50 },
          { "name":"2018", "value":60 }
      ],
      "zjl":[
          { "name":"2013", "value":55600 },
          { "name":"2014", "value":95600 },
          { "name":"2015", "value":162896 },
          { "name":"2016", "value":195761 },
          { "name":"2017", "value":87068 },
          { "name":"2018", "value":68393 }
      ]
  }
}


//初始化图表
function initCharts() {
  initCharts_One(chartsData.fltj)
  initCharts_Two(chartsData.zjly)
  initCharts_Three(chartsData.ndtj)
}

// chartOne  分类统计
function initCharts_One(arr) {
  for (var i = 0, len = arr.length; i < len; i++) {
    let item = arr[i]
    let html =`<li>
        <div class="title">${item.name}</div>
        <div class="conter"><span>${item.xms}</span>个，投资<span>${item.zds}</span>亿，占地<span>${item.zjl}</span>亩</div>
      </li>`
    $('#ulFLTJ').append(html)
  }
}

//chartTwo  Echart圆形  分类资金来源
function initCharts_Two(arr) {
  let data = []
  for (var i = 0; i < arr.length; i++) {
    let object = {}
    object.name = arr[i].name
    object.value = arr[i].value
    data[i] = object
  }

  setTimeout(function () {
    window.onresize = function () {
      myChart.resize()
    }
  }, 200)

  var myChart = echarts.init(document.getElementById('ul_ZJLY'))
  var option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}<br/>{c}',
    },
    //图例 的相关设置
    legend: {
      orient: 'vertical',
      left: 'right',
      textStyle: {
        color: '#ccc',
      },
    },
    //图形的设置
    series: [
      {
        // name: '访问来源',
        type: 'pie',
        radius: '80%',
        right: '20%',
        //图形上文本标签的样式设置
        label: {
          show: false,
        },
        color: [
          '#37A2DA',
          '#32C5E9',
          '#67E0E3',
          '#9FE6B8',
          '#FFDB5C',
          '#ff9f7f',
          '#fb7293',
          '#E062AE',
          '#E690D1',
          '#e7bcf3',
          '#9d96f5',
          '#8378EA',
          '#96BFFF',
        ],
        center: ['35%', '55%'],
        data: data, //使用for循环添加
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }
  myChart.setOption(option)
}

//chartThree   Echart柱状   年度统计
function initCharts_Three(arr) {
  histogram(arr.xms, '个')
  $('#btnNDTJ_xms').click(function () {
    histogram(arr.xms, '个')
  })
  $('#btnNDTJ_zds').click(function () {
    histogram(arr.zds, '亩')
  })
  $('#btnNDTJ_zjl').click(function () {
    histogram(arr.zjl, '亿')
  })
}

//项目、占地、资金    按钮点击切换
function histogram(arr, Word) {
  var arrName = []
  var arrValue = []
  for (var i = 0; i < arr.length; i++) {
    arrName[i] = arr[i].name
    arrValue[i] = arr[i].value
  }

  setTimeout(function () {
    window.onresize = function () {
      myChart.resize()
    }
  }, 200)

  var myChart = echarts.init(document.getElementById('ul_ NDTJ'))
  var option = {
    //xAxis和yAxis的nameTextStyle不起作用
    // 因此设置了字体的全局样式
    textStyle: {
      color: '#ccc',
    },
    title: {
      text: '单位:' + Word,
      // 全局样式对此不生效，
      textStyle: {
        color: '#ccc',
      },
    },
    //移入柱子时的阴影
    tooltip: {
      trigger: 'axis',
      formatter: '{b}<br/>{c}' + Word,
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      left: '5px',
      right: '0',
      bottom: '5px',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: arrName,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        //柱子的相关设置
        itemStyle: {
          color: 'rgb(0, 174, 255)',
        },
        barWidth: '20px',
        type: 'bar',
        emphasis: {
          focus: 'series',
        },
        data: arrValue,
      },
    ],
  }
  myChart.setOption(option)
}
